<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮 Button-表单-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/circle.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/js/form/button.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="button"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>按钮 Button</h1>
        <hr>
        <p>在 ZPCode 中我们提供了4种状态的按钮：</p>
        <ul class="disc">
          <li>默认：默认按钮一共有9种颜色，主色、次色、警告色、危险色、提示色、成功色、黑色、白色、金色。</li>
          <li>幽灵：表现为背景透明的线框按钮。</li>
          <li>禁用：表现为半透明状，且不可点击。</li>
          <li>加载中：表现为半透明状，且不可点击，用于异步操作。</li>
        </ul>

        <hr class="mt48 mb24">
        <h2 id="default"># 默认按钮</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw lh8">
          <zp-button class="m4">主色按钮</zp-button>
          <zp-button color="second" class="m4">次色按钮</zp-button>
          <zp-button color="warning" class="m4">警告按钮</zp-button>
          <zp-button color="error" class="m4">危险按钮</zp-button>
          <zp-button color="info" class="m4">提示按钮</zp-button>
          <zp-button color="success" class="m4">成功按钮</zp-button>
          <zp-button color="black" class="m4">黑色按钮</zp-button>
          <zp-button color="white" class="m4">白色按钮</zp-button>
          <zp-button color="gold" class="m4">金色按钮</zp-button>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-button-default-html"></code></pre>

        <hr class="mt48 mb24">
        <h2 id="ghost"># 幽灵按钮</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw lh8">
          <zp-button type="ghost">幽灵按钮</zp-button>
          <zp-button type="ghost" color="error" class="ml12">幽灵按钮</zp-button>
          <zp-button type="ghost" color="error" border-type="dashed" class="ml12">幽灵虚线按钮</zp-button>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-button-ghost-html"></code></pre>

        <hr class="mt48 mb24">
        <h2 id="disabled"># 禁用按钮</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw lh8">
          <zp-button>正常按钮</zp-button>
          <zp-button disabled class="ml12">禁用按钮</zp-button>
          <zp-button type="ghost" class="ml12">正常按钮</zp-button>
          <zp-button type="ghost" disabled class="ml12">禁用按钮</zp-button>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-button-disabled-html"></code></pre>

        <hr class="mt48 mb24">
        <h2 id="loading"># 加载中按钮</h2>
        <p class="txt-w"><b>⚠ 加载类型按钮，需要引入<code>al-circle</code>组件。</b></p>
        <p>👇效果演示：</p>
        <div class="quote f fw lh8">
          <zp-button status="loading">加载中..</zp-button>
          <zp-button class="ml12 loadingdelay">1s延迟</zp-button>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-button-loading-html"></code></pre>

        <hr class="mt48 mb24">
        <h2 id="more"># 属性拓展</h2>
        <p><code>color</code>属性可以控制按钮颜色，默认为<code>primary</code>，支持的值有<code>second</code><code>error</code><code>warning</code><code>info</code><code>success</code><code>gold</code><code>black</code><code>white</code>。其它颜色，建议通过 CSS 变量进行控制，其对应的变量分别为<code>--zp-primary</code><code>--zp-second</code><code>--zp-error</code><code>--zp-warning</code><code>--zp-info</code><code>--zp-success</code><code>--zp-gold</code><code>--zp-black</code><code>--zp-white</code></p>
        <p><code>height</code>属性可以控制按钮高度，默认为<code>2em</code>；CSS 变量为<code>--zp-button-height</code>。</p>
        <p><code>radius</code>属性可以控制按钮圆角，默认为<code>4px</code>；CSS 变量为<code>--zp-button-radius</code>。</p>
        <p><code>border-type</code>属性可以控制按钮边框类型，默认为<code>solid</code>；CSS 变量为<code>--zp-button-border-type</code>。</p>
        <p><code>status="loading"</code>属性可以为按钮添加加载中样式。</p>
        <p>控制按钮大小，可以添加<code>font-size</code>样式进行修饰即可。</p>
        <p>👇效果与代码演示：</p>
        <div class="quote f fw ac lh8">
          <zp-button color="second" style="--zp-second:pink">自定义颜色</zp-button>
          <zp-button style="--zp-primary:linear-gradient(90deg,rgb(22,113,216),#1fbdff)" class="ml12">自定义渐变颜色</zp-button>
          <zp-button radius="50px" class="ml12">超圆角按钮</zp-button>
          <zp-button radius="0" class="ml12">直角按钮</zp-button>
          <zp-button style="font-size:18px" radius="10px" class="ml12">大号按钮</zp-button>
        </div>
        <pre class="pr"><code class="hljs language-xml zp-button-more-html-color"></code></pre>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#default" class="txt-con txt-p-h">默认</a></li>
        <li><a href="#ghost" class="txt-con txt-p-h">幽灵</a></li>
        <li><a href="#disabled" class="txt-con txt-p-h">禁用</a></li>
        <li><a href="#loading" class="txt-con txt-p-h">加载中</a></li>
        <li><a href="#more" class="txt-con txt-p-h">属性扩展</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>